<script>
export default {
  name: "lifeCycle",
  data() {
    return {
      msg: "vue"
    }
  },
  methods: {},
  // 生命周期
  // 创建之前，data和methods中的数据还没有初始化，作用：页面重定向
  beforeCreate() {
    console.log('beforeCreate')
    console.log(this.msg)
  },
  // 创建之后，data和methods中的数据初始化完成，第一个可以操作data和methods中数据的生命周期
  // 作用：数据初始化，接口请求
  created() {
    console.log('created')
    console.log(this.msg)
    this.msg = 'hello'
  },
  //  虚拟DOM挂载
  beforeMount() {
    console.log('beforeMount')
    console.log(document.getElementById('box'))
  },
  // 真实的DOM,第一个可以操作DOM元素的生命周期
  mounted() {
    console.log('mounted')
    console.log(document.getElementById('box'))
  },
  // 执行0次或者更多次
  // 更新之前，data和页面内的数据还未保持同步，页面内的数据是旧的，data里面的数据是最新的
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  // 更新之后，data和页面中的数据已经保持一致
  updated() {
    console.log('updated')
  },
  // 销毁之前，页面还没有真正的销毁
  // 作用：清空定时器和页面监听
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  // 销毁之后
  destroyed() {
    console.log('destroyed')
  }
}
</script>

<template>
  <div id="box">{{ msg }}
    <input type="text" v-model="msg">
    <router-link to="/about">about</router-link>
  </div>
</template>

<style scoped lang="less">

</style>